import Vue from 'vue'
import Vuex from 'vuex'
// 导入固话工具
import perState from "vuex-persistedstate"
// 在vue中使用vuex插件
Vue.use(Vuex)
// vuex中的数据和页面也能实现数据双向绑定
var store = new Vuex.Store({
    // state vuex存储数据的属性
    
    state: {
        products: [],

        username:"zhangsan",
        infor: "你是个麻瓜"
    },
    plugins: [
        perState({
            reducer(val) {
                return {
                    products: val.products
                }
            }
        })
    ],

    getters: {
        changUser(state) {
            return state.username
        }
    },
    mutations: {
        // 写改变vuex数据的唯一方法就是提交mutation
        // mutation 方法的第一个参数是默认的 就是 state对象 第二个参数是方法触发时传递的参数
        changeProducts(state, val) {
            // some方法 如果数组中有一个满足条件的就返回true
            // var bool = state.products.some((item, index) => {
            //     return item._id == val._id
            // })
            if(state.products.length === 0) {
                val.count++
                state.products.push(val)
            } else {
                var flag = false // 用来记录购物车中是否有该数据
                state.products.forEach((item) => {
                    if(item._id == val._id) {
                        item.count++
                        flag = true
                    }
                })
                if(!flag) {
                    val.count++
                    state.products.push(val)
                }

            }
            
            
        },

        delProducts(state, val) {
            state.products.forEach((item, i) => {
                if(item._id == val._id) {
                    state.products.splice(i, 1)
                }
             })
        }
    },

    actions:{

    }
})


export default store
